<template>
	<view>
		<!-- <Header height="222rpx" title="记录" :paddingTop="navHeight"></Header> -->
		<view class="header-tab">
			<u-subsection :list="tablist" activeColor="#ff3140" keyName="name" mode="subsection" :current="current"
				@change="changeTab"></u-subsection>
		</view>
		<view class="w345 mauto" style="padding-top: 100rpx;">
			<view class=" " style="padding-top: 20rpx;">
				<view class="order-card" v-for="(v,i) in list" :key="i" @click="toDetail(v)">
					<!-- 顶部：订单号 & 状态 -->
					<view class="order-top">
						<text class="order-no">卡号：{{ v.cardNumber }}</text>
						<text class="order-status" :class="'status-' + v.status">
							{{ paymentMapStatus[v.status] }}
						</text>
					</view>
					<!-- 套餐名称 + 时间 -->
					<view class="order-title-row">
						<text class="order-title">{{ v.comboName }}</text>
						<text class="order-time">{{ v.exchangeTime }}</text>
					</view>
					<!-- 收货人信息 -->
					<view class="order-receiver">
						{{ v.receiverName }}　手机号 {{ v.receiverPhone }}
					</view>
					<!-- 地址 -->
					<view class="order-address">
						{{ v.province }}{{ v.city }}{{ v.district }}{{ v.detailAddress }}
					</view>

					<!-- 底部区域：快递号 & 确认收货 -->
					<view class="order-bottom" @click.stop v-if="v.trackingNumber || current === 1">

						<text v-if="v.trackingNumber" class="order-express">
							快递单号：{{ v.trackingNumber }}
						</text>

						<button v-if="current === 1" class="btn-confirm" @click="toComfirm(v)">
							确认收货
						</button>

					</view>
				</view>

				<!-- 空状态 -->
				<view v-if="list.length === 0" class="empty-box">
					<u-empty mode="data"></u-empty>
				</view>


			</view>
			<view class="" style="height: 100rpx;"></view>
		</view>
		<block v-if="showComfirm">
			<ChooseAddress ref="ChooseAddress" :show="showComfirm" :detailInfo="detailInfo" :defaultAddress="defaAd"
				@close="showComfirm=false" @handleBuy="handleBuy">
			</ChooseAddress>
		</block>
	</view>
</template>

<script>
	import {
		getComboListApi,
		comboConfirmShopApi
	} from '@/api/index.js';
	import Header from "@/components/header/header.vue";
	import navbar from "@/components/navbar/navbar.vue";
	import ChooseAddress from '@/components/chooseAddress/chooseAddress.vue';
	export default {
		components: {
			Header,
			navbar,
			ChooseAddress
		},
		data() {
			return {
				showComfirm: false,
				detailInfo: {},
				defaAd: {},
				paymentMapStatus: {
					0: '待发货',
					1: '已发货',
					2: '已签收',
				},

				point: 0,
				isActive: 0,
				// 或者如下，也可以配置keyName参数修改对象键名
				tablist: [{
					name: '待发货',
					value: 0
				}, {
					name: '已发货',
					value: 1
				}, {
					name: '已签收',
					value: 2
				}],
				list: [],
				current: 0,
				page: 1,
				pageSize: 20,
				last_page: 1,
				navHeight: '0px',
			}
		},
		onLoad() {
			this.getOrderList();
		},
		onShow() {
			console.log('出发');

		},
		onReachBottom() {
			if (this.page == this.last_page) {
				this.$utils.msg('已经到底啦');
				return
			}
			this.page++
			this.getOrderList()
		},
		methods: {
			// 跳转详情
			toDetail(item) {
				console.log(item);
				uni.setStorageSync('orderDetail', JSON.stringify(item))
				uni.navigateTo({
					url: '/pages/mine/order/detail'
				})
			},
			changeTab(val) {
				console.log(val);
				this.list = [];
				this.current = val;
				this.page = 1;
				this.getOrderList()
			},
			// 确认收货
			toComfirm(item) {
				uni.showModal({
					title: '提示',
					content: '您确定要确认收货吗？',
					success: async (res) => {
						if (res.confirm) {
							const res = await comboConfirmShopApi({
								id: item.id,
								status: 2
							});
							if (res.code === 200) {
								uni.showToast({
									title: '确认收货成功'
								})
								this.current = 2;
								this.page = 1;
								this.getOrderList()
							}
						}
					}
				})
			},
			// 套餐订单记录
			async getOrderList() {
				const res = await getComboListApi({
					pageNum: this.page,
					pageSize: this.pageSize,
					userId: uni.getStorageSync('UserInfo').userId,
					status: this.tablist[this.current].value
				});
				console.log(res, 'res');
				if (res.code === 200) {
					this.last_page = res.data.navigateLastPage
					this.list = this.page == 1 ? res.data.list : [...this.list, ...res.data.list]
				}
			},
		}
	}
</script>

<style>
	.mt-216 {
		margin-top: -216rpx !important;
	}

	.active {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
	}

	.active_line {
		margin: 0 auto;
		margin-top: 5rpx;
		background: #0D8FFF;
		width: 40rpx;
		height: 6rpx;
		margin-left: 45rpx;
		transition: transform 0.3s ease;
		/* 添加过渡效果 */
	}

	.translatedX {
		transform: translateX(150rpx);
	}

	.bb {
		border-bottom: 2rpx solid #F5F5F5;
	}

	.cFE8F32 {
		color: #FE8F32;
	}

	.w345 {
		width: 700rpx;
	}

	.mauto {
		margin: auto
	}

	.fs14 {
		font-size: 28rpx;
	}

	.cfff {
		color: #fff
	}

	.textc {
		text-align: center
	}

	.mb10 {
		margin-bottom: 10rpx;
	}

	.fs30 {
		font-size: 60rpx;
	}

	.bradius10 {
		border-radius: 20rpx;
	}

	.bgfff {
		background: #fff
	}

	.disflex {
		display: flex
	}

	.pl20 {
		padding-left: 40rpx;
	}

	.pt10 {
		padding-top: 20rpx;
	}

	.fs12 {
		font-size: 24rpx
	}

	.align-cen {
		align-items: center
	}

	.jsbet {
		justify-content: space-between
	}

	.pr20 {
		padding-right: 40rpx;
	}

	.minh60vh {
		height: calc(100vh - 64px);
	}

	.posre {
		position: relative;
		overflow-y: auto;
	}

	.zindex9 {
		z-index: 9
	}

	.fs16 {
		font-size: 30rpx;
	}

	.fb500 {
		font-weight: 500
	}

	.fb600 {
		font-weight: 600
	}

	.c999 {
		color: #999
	}


	.mb5 {
		margin-bottom: 10rpx;
	}

	.order-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header-tab {
		position: fixed;
		height: 84rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		width: 100%;
		padding: 20rpx;
		z-index: 99999;
	}

	/* 单个卡片 */
	.order-card {
		background: #fff;
		border-radius: 20rpx;
		padding: 26rpx 30rpx;
		margin-bottom: 22rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.06);
	}

	/* 顶部：订单号 + 状态 */
	.order-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.order-no {
		font-size: 26rpx;
		color: #999;
	}

	.order-status {
		padding: 6rpx 20rpx;
		border-radius: 999rpx;
		font-size: 22rpx;
	}

	/* 状态颜色 */
	.status-0 {
		background: #fff4e6;
		color: #ff9f1a;
	}

	/* 待发货 */
	.status-1 {
		background: #e8f3ff;
		color: #1989fa;
	}

	/* 已发货 */
	.status-2 {
		background: #e7ffef;
		color: #39b54a;
	}

	/* 已签收 */

	/* 套餐名称 + 时间 */
	.order-title-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 12rpx;
	}

	.order-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		max-width: 430rpx;
	}

	.order-time {
		font-size: 24rpx;
		color: #999;
	}

	/* 收货人 */
	.order-receiver {
		color: #FE8F32;
		font-size: 26rpx;
		margin-bottom: 8rpx;
	}

	/* 地址 */
	.order-address {
		color: #666;
		font-size: 24rpx;
		line-height: 1.5;
		margin-bottom: 14rpx;
	}

	/* 底部 */
	.order-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 12rpx;
	}

	.order-express {
		color: #999;
		font-size: 24rpx;
	}

	/* 按钮 */
	.btn-confirm {
		background: #FE8F32;
		color: #fff;
		padding: 0 26rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 999rpx;
		font-size: 26rpx;
		border: none;
	}

	.btn-confirm::after {
		border: none;
		/* 去掉按钮默认边框 */
	}

	/* 空状态居中 */
	.empty-box {
		margin-top: 200rpx;
	}
</style>